<template>
  <div v-if="courseDataList.length > 0" class="commend container">
    <div class="title">课程推荐</div>
    <edu-course-list :courseList="courseDataList" @next="handleNext"></edu-course-list>
  </div>
</template>

<script>
import EduCourseList from '@/components/EduCourseList'
export default {
  components: {
    EduCourseList
  },
  data() {
    return {
      courseDataList: []
    }
  },
  methods: {
    getListInfo() {
      this.$api.getCourseSplendid(this.$route.params.id, res => {
        this.handleGetDataSuccs(res)
      })
    },
    handleGetDataSuccs(res) {
      const { data } = res
      this.courseDataList = data
    },
    handleNext(item) {
      this.$router.push({ path: '/course/' + item.id })
    }
  },
  mounted() {
    this.getListInfo()
  }
}
</script>
<style lang="scss" scoped>
.commend {
  margin-top: 50px;
  .title {
    margin-bottom: 30px;
    font-size: 28px;
    font-weight: 500;
    color: $text-color-import;
  }
  ::v-deep .course-list {
    .item {
      margin-bottom: 0;
    }
  }
}
</style>
